<template>
  <div class="index">
    <commonHeader></commonHeader>

    <div class="swiper-wrap">
      <swiper
        v-if="ListBanner.length"
        :options="swiperOption"
        class="swiper-container swiper-container1"
        ref="mySwiper"
      >
        <swiper-slide
          class="swiper-item"
          v-for="(item, index) of ListBanner"
          :key="index"
        >
          <img class="swiper-img" :src="item.banner" alt="" />
        </swiper-slide>
        <!-- <div class="swiper-pagination" slot="pagination"></div> -->
      </swiper>
      <div class="banner-text">
        <div class="en">HUI YUAN</div>
        <div class="cn">
          实力
          <span>惠元</span>
        </div>
      </div>
    </div>

    <!-- <div class="banner" v-if="ListBanner.length == 1">
      <img class="banner-img" :src="ListBanner[0].banner" alt="" />
      <div class="banner-text">
        <div class="en">HUI YUAN</div>
        <div class="cn">
          实力
          <span>惠元</span>
        </div>
      </div>
    </div> -->

    <!-- <div class="news-tab wow fadeInUp">
      <router-link class="item" @click.native="$router.go(0)" to="/strength/doctors#a0">名医臻享</router-link>
      <router-link class="item" @click.native="$router.go(0)" to="/strength/design#a1">幸福设计</router-link>
      <router-link class="item" @click.native="$router.go(0)" to="/strength/serve#a2">五心服务</router-link>
    </div> -->
    <router-view></router-view>
    <commonFooter></commonFooter>
  </div>
</template>

<script lang="ts">
// ajax
import { AllBanner } from "@/assets/js/api";
import { Component, Vue } from "vue-property-decorator";
import commonHeader from "@/components/headers.vue";
import commonFooter from "@/components/footer.vue";
@Component({
  name: "doctorsWrap",
  components: {
    commonHeader,
    commonFooter,
  },
})
export default class doctorsWrap extends Vue {
  active = 0;
  ListBanner = [];
  swiperOption = {
    // 参数选项,显示小点
    pagination: ".swiper-pagination",
    paginationClickable: true,
    //循环
    loop: true,
    // 用户操作swiper之后，是否禁止autoplay
    autoplayDisableOnInteraction: false,
    //滑动速度
    speed: 1000,
    autoplay: {
      delay: 3000,
      stopOnLastSlide: false,
      disableOnInteraction: false,
    },
  };

  get swiper(): any {
    console.log(this.$refs, "this.$refs.mySwiper1");
    return this.$refs.mySwiper.$swiper;
  }

  cutNews(index: number): void {
    console.log(index);
    this.active = index;
  }
  // 跳转锚点
  goAnchor(selector: string): void {
    if (selector) {
      let anchor = this.$el.querySelector(selector);
      if (anchor) {
        console.log(selector, "selector");
        document.documentElement.scrollTop = anchor.offsetTop;
      }
    }
  }
  mounted() {
    let parameter1 = {
      bannerposition: 12,
      // typename: "实力惠元-医生管理-医生说明",
    };
    // banner
    AllBanner(parameter1).then((response: any) => {
      // console.log(response.data, "HelloChildBanner")
      if (response.data.ReturnCode == 0) {
        if (response.data.Data) {
          var data = response.data.Data;
          this.ListBanner = data;
          this.$nextTick(() => {
            if (this.$route.hash) {
              this.goAnchor(this.$route.hash);
            }
          });
        }
      }
    });
  }
}
</script>

<style lang="scss" scoped>
.index {
  .common-tit {
    text-align: center;

    .text {
      font-size: 0.3rem;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: center;
      color: #000000;
      line-height: 0.42rem;
      padding-bottom: 0.24rem;
      position: relative;

      &::before {
        position: absolute;
        content: "";
        width: 0.15rem;
        height: 0.04rem;
        background: #b09c6e;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
      }
    }

    .introduct {
      line-height: 0.42rem;
      font-size: 0.3rem;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: center;
      margin-top: 0.15rem;
    }
  }

  .swiper-wrap {
    position: relative;

    .swiper-container1 {
      width: 100%;
      height: 8.1rem;
      overflow: hidden;
      position: relative;

      .swiper-item {
        .swiper-img {
          width: 100%;
          height: 100%;
        }
      }
    }

    .banner-text {
      position: absolute;
      z-index: 1;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);

      .en {
        font-size: 0.16rem;
        font-family: Didot;
        text-align: center;
        color: #ffffff;
        line-height: 0.24rem;
        letter-spacing: 0.03rem;
      }

      .cn {
        font-size: 0.4rem;
        font-family: TaipeiSansTCBeta, TaipeiSansTCBeta-Bold;
        font-weight: 700;
        text-align: center;
        color: #c86b6e;
        line-height: 0.64rem;

        span {
          color: #fff;
        }
      }
    }
  }

  .banner {
    position: relative;

    .banner-img {
      width: 100%;
      height: 8.1rem;
    }

    .banner-text {
      position: absolute;
      z-index: 1;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);

      .en {
        font-size: 0.16rem;
        font-family: Didot;
        text-align: center;
        color: #ffffff;
        line-height: 0.24rem;
        letter-spacing: 0.03rem;
      }

      .cn {
        font-size: 0.4rem;
        font-family: TaipeiSansTCBeta, TaipeiSansTCBeta-Bold;
        font-weight: 700;
        text-align: center;
        color: #c86b6e;
        line-height: 0.64rem;

        span {
          color: #fff;
        }
      }
    }
  }

  .news-tab {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;

    .item {
      opacity: 0.4;
      font-size: 0.12rem;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: center;
      color: #000000;
      line-height: 0.17rem;
      padding: 0.29rem 0.56rem;
      cursor: pointer;
      border-bottom: 1px solid transparent;

      &:hover {
        opacity: 1;
        border-bottom: 1px solid #b09c6e;
      }

      &.router-link-active {
        opacity: 1;
        border-bottom: 1px solid #b09c6e;
      }
    }
  }
}
</style>
